<template>
  <div class="app-container">
    <region-panel />
    <div class="box">
      <el-row class="row1">
        <el-col :span="12">
          <span class="titles">地区统计（公斤 / 千克）</span>
        </el-col>
        <el-col :span="12"
                align="right">
          <el-date-picker v-model="datetime"
                          align="right"
                          type="date"
                          placeholder="选择查询日期"
                          size="mini"
                          :picker-options="pickerOptions">
          </el-date-picker>
        </el-col>

      </el-row>
      <el-row>
        <china-chart :chart-data="chinaChartData" />
      </el-row>
    </div>
  </div>
</template>

<script>
import { ChinaChart, RegionPanel } from '@/components'
const chinaChartData = [
  {
    name: '江苏',
    value: 50005
  },
  {
    name: '北京',
    value: 3.8
  },
  {
    name: '上海',
    value: 4.6
  },
  {
    name: '重庆',
    value: 3.6
  },
  {
    name: '河北',
    value: 3.4
  },
  {
    name: '河南',
    value: 3.2
  },
  {
    name: '云南',
    value: 1.6
  },
  {
    name: '辽宁',
    value: 4.3
  },
  {
    name: '黑龙江',
    value: 20000
  },
  {
    name: '湖南',
    value: 2.4
  },
  {
    name: '安徽',
    value: 3.3
  },
  {
    name: '山东',
    value: 3.0
  },
  {
    name: '新疆',
    value: 1
  },
  {
    name: '江苏',
    value: 3.9
  },
  {
    name: '浙江',
    value: 3.5
  },
  {
    name: '江西',
    value: 2.0
  },
  {
    name: '湖北',
    value: 2.1
  },
  {
    name: '广西',
    value: 3.0
  },
  {
    name: '甘肃',
    value: 1.2
  },
  {
    name: '山西',
    value: 3.2
  },
  {
    name: '内蒙古',
    value: 3.5
  },
  {
    name: '陕西',
    value: 2.5
  },
  {
    name: '吉林',
    value: 4.5
  },
  {
    name: '福建',
    value: 2.8
  },
  {
    name: '贵州',
    value: 1.8
  },
  {
    name: '广东',
    value: 3.7
  },
  {
    name: '青海',
    value: 0.6
  },
  {
    name: '西藏',
    value: 0.4
  },
  {
    name: '四川',
    value: 3.3
  },
  {
    name: '宁夏',
    value: 0.8
  },
  {
    name: '海南',
    value: 1.9
  },
  {
    name: '台湾',
    value: 0.1
  },
  {
    name: '香港',
    value: 0.1
  },
  {
    name: '澳门',
    value: 0.1
  }
]
export default {
  name: 'region',
  components: {
    ChinaChart,
    RegionPanel
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      datetime: '',
      chinaChartData: chinaChartData
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .github-corner {
    position: absolute;
    top: 0px;
    border: 0;
    right: 0;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.box {
  padding: 20px 10px;
  box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.08);
}
.row1 {
  background: #fff;
  padding: 16px 36px 0;
}
.titles {
  line-height: 18px;
  color: rgba(0, 0, 0, 0.25);
  font-size: 14px;
  margin-bottom: 12px;
  //   font-weight: 600;
}
</style>